Fix Link Navigation relative to current Environment #24483

Talha345 · 2023-08-12T13:21:04Z

Details

Fixed Issues

$ #22523
PROPOSAL: #22523 (comment)

Tests

Test Case 1:

Go to any chat and send the following links in the chat:

Now click on all the links one be one, only the link corresponding to the current environment should be opened internally whereas all other links should be opened externally.

Test Case 2:

Go to any chat and send the following links in the chat:

Now click on all the links one be one.
In Dev: All 3 links should be external.
In STG: 2nd link should be internal
in PROD: Last link should be internal

This test case ensures that if an extra www subdomain is added to any URL, it is discarded and the correct behaviour prevails.

Note: In Dev ENV, you can change the line https://github.com/Expensify/App/compare/main...Talha345:fix/22523?expand=1#diff-810e7a5e5e8692ea5ea69e3b593e7e6abb3992e2682a7aaf89c8615db6840d83R22 and set it to const environmentURL = CONST.STAGING_NEW_EXPENSIFY_URL; or const environmentURL = CONST.NEW_EXPENSIFY_URL; to test the behaviour in STG and PROD environments on localhost.

Verify that no errors appear in the JS console

Offline tests

Same as above

QA Steps

Go to any chat and send the following links in the chat:

Now click on all the links one be one, only the staging links should open internally and all other links should open externally.

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Web

web.mov

Mobile Web - Chrome

WhatsApp.Video.2023-08-12.at.2.57.19.PM.mp4

Mobile Web - Safari

safari.mov

Desktop

Since the desktop app runs on port 8083 so only localhost links with port 8083 will be treated as internal.

desktop.mov

iOS

Since the DEV_PORT returned in native apps is 8082, only localhost links with port 8082 will be treated as internal on IOS and Android.

ios.mov

Android

android.mov

melvin-bot · 2023-08-12T13:21:09Z

@situchan Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

Talha345 · 2023-08-12T13:24:03Z

src/CONFIG.js

@@ -80,7 +80,7 @@ export default {
    },
    CAPTURE_METRICS: lodashGet(Config, 'CAPTURE_METRICS', 'false') === 'true',
    ONYX_METRICS: lodashGet(Config, 'ONYX_METRICS', 'false') === 'true',
-    DEV_PORT: process.env.PORT || 8080,
+    DEV_PORT: process.env.PORT || 8082,


Updated since we now run dev on 8082 so fallback port should be 8082.

Talha345 · 2023-08-12T16:43:06Z

__mocks__/react-native.js

@@ -15,7 +14,12 @@ jest.doMock('react-native', () => {
    // runs against index.native.js source and so anything that is testing a component reliant on withWindowDimensions()
    // would be most commonly assumed to be on a mobile phone vs. a tablet or desktop style view. This behavior can be
    // overridden by explicitly setting the dimensions inside a test via Dimensions.set()
-    let dimensions = CONST.TESTING.SCREEN_SIZE.SMALL;
+    let dimensions = {


I had to make these changes because this mock file was importing CONST file which was in turn importing src/libs/Url.js file in which we have imported the polyfill. Since the polyfill import internally imports RN packages and since we are in test environment the packages were being used before mocking them (which is done later in this file) and the test suite broke.To fix this we have multiple options:

We can import the polyfill in the root App.js file as mentioned in the usage guidelines (https://github.com/charpeni/react-native-url-polyfill) but it will then override URL and URLSearchParams classes in the entire project.I actually committed that change in the previous commit and everything was working fine including the test cases.Also these 2 classes are not used much so the chance of breaking something is low and since the overrides basically extends the default RN classes so I think we are fine using this option too.

Remove the import from the test suite before the mocking happens.In this option I had 2 further options:

Remove the Url.js import from CONST.js as it was imported to use the addTrailingForwardSlash just at one place in the file.Also importing lib files in CONST file does not make sense.

The other option was to remove the CONST file import in this file and that's what I have done now.

Let me know what you think is the best way forward.

remove the CONST file import in this file

Current solution you did works for me.
@francoisl what do you think?

Yeah works for me too.

situchan · 2023-08-13T18:04:42Z

tests/unit/UrlTest.js

@@ -224,8 +9,8 @@ describe('Url', () => {
            it('It should work correctly with www in both urls', () => {
                expect(Url.hasSameExpensifyOrigin('https://www.new.expensify.com/inbox/124', 'https://www.new.expensify.com/action/123')).toBe(true);
            });
-            it('It should work correctly without https://', () => {
-                expect(Url.hasSameExpensifyOrigin('new.expensify.com/action/1234', 'new.expensify.com/action/123')).toBe(true);


Why this case was removed? It should still work without https://

URL href attributes always need to have a protocol in them otherwise it is an invalid URL.If you type google.com in any chat on STG and then hover over it to view the href it will show https://google.com, so our logic already creates the correct href

Any url without the protocol and // is treated as a relative URL and is not spec complaint.You can go to any browser and type new URL('google.com') in the console section and it will throw an error.

Therefore, the previous test case was invalid.

situchan · 2023-08-13T18:05:44Z

tests/unit/UrlTest.js

@@ -1,221 +1,6 @@
 const Url = require('../../src/libs/Url');

 describe('Url', () => {
-    describe('getURLObject()', () => {


All these example urls should still be unit tested in getPathFromURL.

Added tests for getPathFromURL

situchan · 2023-08-13T18:10:04Z

__mocks__/react-native.js

@@ -15,7 +14,12 @@ jest.doMock('react-native', () => {
    // runs against index.native.js source and so anything that is testing a component reliant on withWindowDimensions()
    // would be most commonly assumed to be on a mobile phone vs. a tablet or desktop style view. This behavior can be
    // overridden by explicitly setting the dimensions inside a test via Dimensions.set()
-    let dimensions = CONST.TESTING.SCREEN_SIZE.SMALL;
+    let dimensions = {


remove the CONST file import in this file

Current solution you did works for me.
@francoisl what do you think?

Talha345 · 2023-08-14T13:53:23Z

@situchan @francoisl Any updates on PR review?

situchan · 2023-08-14T17:34:13Z

@Talha345 please pull main. Unit Tests are now fixed in main

Talha345 · 2023-08-14T17:37:55Z

@Talha345 please pull main. Unit Tests are now fixed in main

Done!

Talha345 · 2023-08-15T15:31:25Z

@situchan Bump for review!

situchan · 2023-08-15T20:14:19Z

I am not able to get dev/staging environmentURL on iOS. We now support flavors and I tested with all 3 apps. All are pointed to production https://new.expensify.com/.
@Talha345 how did you test iOS?

Talha345 · 2023-08-15T20:30:51Z

how did you test iOS?

@situchan
I simply ran npm run ios to install dev version and tested locally.Have also attached video above.

How can i install multiple versions?

You can simply set the environment by setting the ENV variable ENVIRONMENT=(development|adhoc|production).Setting the value as adhoc will also return the staging url.Other values are self explanatory.

situchan · 2023-08-16T06:58:54Z

Reviewer Checklist

I have verified the author checklist is complete (all boxes are checked off).
I verified the correct issue is linked in the ### Fixed Issues section above
I verified testing steps are clear and they cover the changes made in this PR
- I verified the steps for local testing are in the Tests section
- I verified the steps for Staging and/or Production testing are in the QA steps section
- I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
- I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
I checked that screenshots or videos are included for tests on all platforms
I included screenshots or videos for tests on all platforms
I verified tests pass on all platforms & I tested again on:
- Android / native
- Android / Chrome
- iOS / native
- iOS / Safari
- MacOS / Chrome / Safari
- MacOS / Desktop
If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
I verified proper code patterns were followed (see Reviewing the code)
- I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
- I verified that the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. myBool && <MyComponent />.
- I verified that comments were added to code that is not self explanatory
- I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
- I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
- I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
- I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is approved by marketing by adding the Waiting for Copy label for a copy review on the original GH to get the correct copy.
- I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
- I verified the JSDocs style guidelines (in STYLE.md) were followed
If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
I verified that this PR follows the guidelines as stated in the Review Guidelines
I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
If a new component is created I verified that:
- A similar component doesn't exist in the codebase
- All props are defined accurately and each prop has a /** comment above it */
- The file is named correctly
- The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
- The only data being stored in the state is data necessary for rendering and nothing else
- For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
- Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
- All JSX used for rendering exists in the render method
- The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
If any new file was added I verified that:
- The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
If a new CSS style is added I verified that:
- A similar style doesn't already exist
- The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)
If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Web

web-staging.mov

Mobile Web - Chrome

mchrome-dev.mov

Mobile Web - Safari

msafari-dev.mov

Desktop

desktop.mov

desktop2.mov

iOS

ios-dev.mov

ios-prod.mov

Android

android-dev.mov

situchan

LGTM
@francoisl all yours

OSBotify · 2023-08-17T04:06:40Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

ahmedGaber93 · 2023-08-17T22:42:29Z

Hi @situchan @francoisl @Talha345
while working in #23143 I found
this PR in this condition open any link with the same origin in the same tab with URL path without params.

App/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js

Lines 54 to 57 in a6fa52d

    
           if (internalNewExpensifyPath && hasSameOrigin) { 
        
               Navigation.navigate(internalNewExpensifyPath); 
        
               return; 
        
           }

But the URL params is required to attachment URL.
So if I type attachment URL in chat and try to open it, it not work without params.

Steps to reproduce

Open a chat and send an attachment.
Open the attachment preview and copy the URL then send it in the chat.
Click the URL you send it in step 2.

You will see the copied URL:

 http://localhost:8082/r/592589459564169/attachment?source=/chat-attachments/2323255261707990908/w_27c02e267d4a31ceb507e27614174b78309fd003.png

is open wrong link without params

// not complete link
http://localhost:8082/r/592589459564169/attachment

I think we need to exclude the attachment URLs from this condition or add new condition previous this condition to open the attachment URLs with full URL

issue is reported in slack here by @ayazhussain79

Talha345 · 2023-08-17T23:02:09Z

I type attachment URL in chat and try to ope

Hi @ahmedGaber93,

I see what you mean. We updated how the attrPath was calculated in this PR and I assumed that we are only using pretty URLs therefore did not add the query params to the path.

This can be resolved easily by updating getPathFromURL method to return query params too like this:

function getPathFromURL(url) {
    try {
        const parsedUrl = new URL(url);
        const path = parsedUrl.pathname + parsedUrl.search;
        return path.substring(1); // Remove the leading '/'
    } catch (error) {
        console.error('Error parsing URL:', error);
        return ''; // Return empty string for invalid URLs
    }
}

@situchan @francoisl Where should I update this change? Create a new PR or what?

francoisl · 2023-08-18T02:25:52Z

Yes, can you make a new PR please?

situchan · 2023-08-18T12:24:59Z

bump @Talha345

Talha345 · 2023-08-18T12:29:32Z

bump @Talha345

@situchan

PR is done.Just stuck due to long delay in building android app locally.

PR will be ready for review once it is done.

OSBotify · 2023-08-21T22:26:22Z

🚀 Deployed to staging by https://github.com/francoisl in version: 1.3.56-0 🚀

platform	result
🤖 android 🤖	failure ❌
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

OSBotify · 2023-08-24T03:09:23Z

🚀 Deployed to production by https://github.com/roryabraham in version: 1.3.56-24 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	failure ❌
🕸 web 🕸	success ✅

Talha345 added 3 commits August 11, 2023 17:48

Link Navigation fixed and URL polyfill added.

e48d2ce

Merge branch 'main' of github.com:Talha345/Expensify into fix/22523

ff239aa

Error handling added.

1ae9ae4

Talha345 requested a review from a team as a code owner August 12, 2023 13:21

melvin-bot bot requested review from situchan and removed request for a team August 12, 2023 13:21

Talha345 commented Aug 12, 2023

View reviewed changes

Move import to URL file

b94b48f

Talha345 commented Aug 12, 2023

View reviewed changes

situchan reviewed Aug 13, 2023

View reviewed changes

Talha345 added 2 commits August 13, 2023 20:43

Tests for getPathFromURL added.

9df4895

Merge branch 'main' of github.com:Talha345/Expensify into fix/22523

a9f8be2

Talha345 requested a review from situchan August 13, 2023 20:04

Merge branch 'main' of github.com:Talha345/Expensify into fix/22523

4342778

situchan approved these changes Aug 16, 2023

View reviewed changes

melvin-bot bot requested a review from francoisl August 16, 2023 07:37

francoisl approved these changes Aug 17, 2023

View reviewed changes

francoisl merged commit e043331 into Expensify:main Aug 17, 2023
13 of 14 checks passed

ahmedGaber93 mentioned this pull request Aug 17, 2023

display the not found page when attachment is deleted. #23143

Merged

58 tasks

Talha345 mentioned this pull request Aug 18, 2023

[22523] Fix path calculation #25479

Merged

59 tasks

OSBotify mentioned this pull request Aug 21, 2023

Deploy Checklist: New Expensify 2023-08-21 #25625

Closed

ayazhussain79 mentioned this pull request Aug 31, 2023

[$1000] App doesn't open a new tab when clicking on a URL of staging on production #22523

Closed

6 tasks

mountiny mentioned this pull request Jun 14, 2024

[$250] [FT] Onboarding flow: Link is broken to schedule a call with setup specialist (mobile) #43642

Closed

nkdengineer mentioned this pull request Oct 18, 2024

[$50] Onboarding - Deeplink in concierge chat doesn't navigate to the correct screen within the app #50648

Open

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix Link Navigation relative to current Environment #24483

Fix Link Navigation relative to current Environment #24483

Talha345 commented Aug 12, 2023 •

edited

Loading

melvin-bot bot commented Aug 12, 2023

Talha345 Aug 12, 2023

Talha345 Aug 12, 2023

situchan Aug 13, 2023

francoisl Aug 14, 2023

situchan Aug 13, 2023

Talha345 Aug 13, 2023

situchan Aug 13, 2023

Talha345 Aug 13, 2023

situchan Aug 13, 2023

Talha345 commented Aug 14, 2023

situchan commented Aug 14, 2023

Talha345 commented Aug 14, 2023

Talha345 commented Aug 15, 2023

situchan commented Aug 15, 2023

Talha345 commented Aug 15, 2023 •

edited

Loading

situchan commented Aug 16, 2023

situchan left a comment

OSBotify commented Aug 17, 2023

ahmedGaber93 commented Aug 17, 2023

Talha345 commented Aug 17, 2023 •

edited

Loading

francoisl commented Aug 18, 2023

situchan commented Aug 18, 2023

Talha345 commented Aug 18, 2023

OSBotify commented Aug 21, 2023

OSBotify commented Aug 24, 2023

Fix Link Navigation relative to current Environment #24483

Fix Link Navigation relative to current Environment #24483

Conversation

Talha345 commented Aug 12, 2023 • edited Loading

Details

Fixed Issues

Tests

Test Case 1:

Test Case 2:

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

melvin-bot bot commented Aug 12, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Talha345 commented Aug 14, 2023

situchan commented Aug 14, 2023

Talha345 commented Aug 14, 2023

Talha345 commented Aug 15, 2023

situchan commented Aug 15, 2023

Talha345 commented Aug 15, 2023 • edited Loading

situchan commented Aug 16, 2023

Reviewer Checklist

Screenshots/Videos

situchan left a comment

Choose a reason for hiding this comment

OSBotify commented Aug 17, 2023

ahmedGaber93 commented Aug 17, 2023

Talha345 commented Aug 17, 2023 • edited Loading

francoisl commented Aug 18, 2023

situchan commented Aug 18, 2023

Talha345 commented Aug 18, 2023

OSBotify commented Aug 21, 2023

OSBotify commented Aug 24, 2023

Talha345 commented Aug 12, 2023 •

edited

Loading

Talha345 commented Aug 15, 2023 •

edited

Loading

Talha345 commented Aug 17, 2023 •

edited

Loading